<template>
  <div class="calendar-box">
    <!-- 年份 月份 -->
    <div class="months">
      <span
        class="item arrow"
        @click="pickPrevMonth(currentYear, currentMonth)"
      >❮</span>
      <span class="item year-month">
        <strong class="choose-year">
          <span>{{ currentYear }}</span>
          <span>年 </span>
          <span>{{ currentMonth }}</span>
          <span>月</span>
          <span>{{ currentDay }}</span>
          <span>日</span>
        </strong>
      </span>
      <span
        class="item arrow"
        @click="pickNextMonth(currentYear, currentMonth)"
      >❯</span>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
      <li
        v-for="(day, index) in weeksText"
        :key="index"
      >
        {{ day }}
      </li>
    </ul>
    <!-- 日期 -->
    <div
      v-if="!days.length"
      class="days-loading"
    >
      <loading class="loading" />
    </div>
    <ul
      v-else
      class="days"
    >
      <li
        v-for="(day, index) in days"
        :key="index"
      >
        <!--本月-->
        <span
          v-if="day.getMonth() + 1 != currentMonth"
          class="other-month"
        >{{ day.getDate() }}</span>
        <span
          v-else
          class="item"
          :class="{
            'active':
              day.getFullYear() == new Date().getFullYear() &&
              day.getMonth() == new Date().getMonth() &&
              day.getDate() == new Date().getDate()
          }"
        >
          <!--today-->
          <span
            v-if="!(day.getFullYear() == new Date().getFullYear() &&
              day.getMonth() == new Date().getMonth() &&
              day.getDate() == new Date().getDate())"
          > {{ day.getDate() }}</span>
          <span v-else>今</span>
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
import loading from './common/loading.vue'
export default {
  components: { loading },
  data () {
    return {
      currentDay: 0,
      currentMonth: 0,
      currentYear: 0,
      currentWeek: 1,
      days: []
    }
  },
  computed: {
    weeksText () {
      return ['一', '二', '三', '四', '五', '六', '七']
    }
  },
  mounted () {
    this.initDate(null)
  },
  methods: {
    initDate (current) {
      const date = current ? new Date(current) : new Date()
      this.currentDay = date.getDate()
      this.currentYear = date.getFullYear()
      this.currentMonth = date.getMonth() + 1
      this.currentWeek = date.getDay()
      if (this.currentWeek === 0) { this.currentWeek = 7 }
      const strting = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)
      // console.log("today:" + strting + "," + this.currentWeek)
      this.days.length = 0
      // 今天是周日，放在第一行第7个位置，前面6个
      for (let i = this.currentDay; i >= 0; i--) {
        const day = new Date(strting)
        day.setDate(day.getDate() - i)
        // console.log("y:" + day.getDate())
        this.days.push(day)
      }
      for (let i = 1; i < 35 - this.currentDay; i++) {
        const day = new Date(strting)
        day.setDate(day.getDate() + i)
        this.days.push(day)
      }
    },
    pickPrevMonth (year, month) {
      //  setDate(0); 上月最后一天
      //  setDate(-1); 上月倒数第二天
      //  setDate(dx) 参数dx为 上月最后一天的前后dx天
      const day = new Date(this.formatDate(year, month, 1))
      day.setDate(0)
      this.initDate(this.formatDate(day.getFullYear(), day.getMonth() + 1, 1))
    },
    pickNextMonth (year, month) {
      const day = new Date(this.formatDate(year, month, 1))
      day.setDate(35)
      this.initDate(
        this.formatDate(
          day.getFullYear(),
          day.getMonth() + 1,
          1
        )
      )
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate (year, month, day) {
      month = month < 10 ? `0${month}` : month
      day = day < 10 ? `0${day}` : day
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="less" scoped>
.calendar-box {
    padding: 10px;
    min-height: 270px;

    > .months {
        padding: 0;
        margin-bottom: 10px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;

        .item {
            height: 2em;
            line-height: 2em;
            text-align: center;

            &.arrow {
                width: 2em;
                background-color: #e8e8e8;
                cursor: pointer;

                &:hover {
                    background-color: #d6d6d6;
                }
            }
        }
    }

    > .days,
    > .weekdays {
        list-style: none;
        padding: 0;
        margin: 0;
        overflow: hidden;
        margin-bottom: 10px;

        > li {
            display: block;
            float: left;
            width: 37px;
            text-align: center;
        }
    }

    > .weekdays {
        height: 2em;
        line-height: 2em;
    }

    > .days-loading {
        width: 100%;
        height: 14rem;
    }

    > .days {
        min-height: 10em;
        margin-bottom: 0;
        position: relative;

        > li {
            line-height: 2.5em;

            > .other-month {
                opacity: 0.3;
                cursor: initial;
            }

            > .item {
                display: block;
                border-radius: 100%;

                > a {
                    display: block;
                }

                &:hover {
                    background-color: #e8e8e8;
                }

                &.active {
                    background-color: #dedede;
                }
            }
        }
    }
}
</style>
